<template>
  <div id="app-container">
    <!-- 条件查询分页数据的表单 -->
    <el-form
      :inline="true"
      class="demo-form-inline"
      style="margin-top: 20px; margin-left: 10px"
    >
      <el-form-item>
        <!-- <el-input v-model="searchObj.name" placeholder="讲师名"></el-input> -->
        <el-autocomplete
          v-model="searchObj.name"
          :fetch-suggestions="querySearch"
          :trigger-on-focus="false"
          class="inline-input"
          placeholder="讲师名称"
          value-key="name"
        />
      </el-form-item>
      <!--  -->
      <el-form-item>
        <el-select v-model="searchObj.level" placeholder="讲师头衔">
          <el-option label="首席讲师" value="1"></el-option>
          <el-option label="高级讲师" value="2"></el-option>
        </el-select>
      </el-form-item>
      <!--  -->
      <el-form-item label="添加时间">
        <el-col :span="11">
          <el-form-item>
            <el-date-picker
              type="date"
              placeholder="选择开始日期"
              v-model="searchObj.joinDateBegin"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-form-item>
            <el-date-picker
              type="date"
              placeholder="选择截止日期"
              v-model="searchObj.joinDateEnd"
              style="width: 100%"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>
      <!-- 单击按钮时,带条件的分页查询 -->
      <el-button icon="el-icon-search" type="primary" @click="getTeacherPage">
        查询
      </el-button>
      <!--  -->
      <el-button @click="clearData">清空</el-button>
      <!-- 批量删除按钮 -->
      <el-button type="danger" size="medium" @click="batchRemove"
        >批量删除</el-button
      >
    </el-form>

    <!-- 显示数据 -->
    <el-table
      :data="items"
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column type="index" width="50">
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>
      <!-- 显示头像 -->
      <el-table-column prop="avatar" label="头像" width="70px">
        <template slot-scope="scope">
          <img
            v-if="scope.row.avatar"
            style="width:60px;height=60px"
            :src="scope.row.avatar"
          />
          <img
            v-else
            style="width:60px;height=60px"
            src="https://shusu-online-file.oss-cn-beijing.aliyuncs.com/avatar/2021/01/16/default.jpg"
          />
        </template>
      </el-table-column>

      <el-table-column prop="name" label="姓名" width="100"></el-table-column>
      <el-table-column prop="intro" label="简介" width="420"></el-table-column>
      <el-table-column prop="level" label="级别" width="100">
        <template slot-scope="scope">
          <el-tag type="primary" v-if="scope.row.level == 1">首席讲师</el-tag>
          <el-tag type="success" v-else>高级讲师</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="joinDate" label="加入时间" width="100">
      </el-table-column>
      <el-table-column prop="sort" label="排序"> </el-table-column>
      <!-- 編輯 刪除 -->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row.id)"
            >编辑</el-button
          >
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 
      分页导航条
      当前页码/选择每页显示几条记录/每页显示几条记录/
      size-change 每页显示记录条数更新时调用
      current-change 页码更新时调用
     -->
    <el-pagination
      :current-page="page"
      :page-sizes="[3, 5, 8, 10]"
      :page-size="limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      style="padding: 30px 0; text-align: center"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>

<script>
//引入需要使用的js组件
import teacherApi from "@/api/teacher.js";
export default {
  //编写vue语法的内容
  //发送axios请求获取讲师列表,显示到elementui中
  //讲师模块所有的请求都需要访问http://localhost:8110服务器的接口,将所有的CRUD封装到@/api/teacher.js
  data() {
    return {
      ids: [], //用来接收复选框的数组
      items: [], //用来接收讲师列表的数据
      //分页查询的条件的属性的默认值
      page: 1,
      limit: 3,
      searchObj: {},
      total: 0, //查询记录总条数
    };
  },

  methods: {
    /**
            avatar: ""
            career: "北京师范大学法学院副教授、清华大学法学博士。自2004年至今已有9年的司法考试培训经验。长期从事司法考试辅导，深知命题规律，了解解题技巧。内容把握准确，授课重点明确，层次分明，调理清晰，将法条法理与案例有机融合，强调综合，深入浅出。"
            deleted: false
            gmtCreate: "2018-04-03 14:32:19"
            gmtModified: "2019-02-22 02:01:26"
            id: "10"
            intro: "北京师范大学法学院副教授"
            joinDate: "2019-10-29"
            level: 1
            name: "Helen"
            sort: 20
    */
    //1.查询所有teacher
    getTeacherList() {
      teacherApi.teacherList().then((response) => {
        //console.log(response.data.items)
        this.items = response.data.items;
      });
    },
    //2.查询所有teacher分页数据
    getTeacherPage() {
      teacherApi
        .teacherPage(this.page, this.limit, this.searchObj)
        .then((response) => {
          //console.log(response);
          this.items = response.data.pageModel.records;
          //total: 总记录条数,size:当前页查询到记录数 pages:总页码
          this.total = response.data.pageModel.total;
        });
    },
    //每页显示记录条数更新时调用
    handleSizeChange(limit) {
      //alert(limit)
      this.limit = limit;
      //更新之后重新查询分页
      this.getTeacherPage();
    },
    //页码更新时调用
    handleCurrentChange(page) {
      //alert(page)
      this.page = page;
      //更新之后重新查询分页
      this.getTeacherPage();
    },
    //测试查询按钮
    test() {
      console.log(this.searchObj);
    },
    clearData() {
      //双向绑定,赋值空
      this.searchObj = {};
      //重新查一次
      this.getTeacherPage();
    },
    //3.更新讲师
    handleEdit(id) {
      //携带id路由到form表单 edit/:id
      this.$router.push(`/teacher/edit/${id}`);
    },
    //4.删除讲师
    handleDelete(teacher) {
      //alert(id)
      this.$confirm(
        `此操作将永久删除<< ${teacher.name} >>讲师, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          // 点击确认按钮的处理代码
          return teacherApi.teacherRemove(teacher.id);
        })
        .then((response) => {
          // 处理上面删除请求的响应
          // 删除成功提示
          this.$message.success(response.message);
          // 刷新当前页面
          this.getTeacherPage();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      teacherApi.teacherRemove(id);
    },
    //监听复选框
    handleSelectionChange(selection) {
      this.ids = [];
      // console.log(val)
      selection.forEach((teacher) => {
        this.ids.push(teacher.id);
      });
      console.log("选中的id集合" + this.ids);
    },

    //批量删除
    batchRemove() {
      console.log(this.ids);
      if (this.ids.length === 0) {
        this.$message.warning("请选择要删除的记录!");
        return;
      }
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return teacherApi.teacherBatchRemove(this.ids);
        })
        .then((response) => {
          console.log(response);
          console.log("zyd------test");

          console.log("zyd------test");
          this.$message.success(response.message);
          this.getTeacherPage();
        })
        .catch((error) => {
          if (error === "cancel") {
            this.$message.info("取消删除");
          }
        });
    },
    //查询条件自动补全
    querySearch(queryString, cb) {
      teacherApi.selectNameListByKey(queryString).then((response) => {
        cb(response.data.nameList);
      });
    },
  },
  created() {
    //页面加载渲染之前调用方法
    //this代表vue对象
    //this.getTeacherList();//1.查询所有
    this.getTeacherPage(); //2.查询所有分页
  },
};
</script>

